<template>
  <div class="navbar flex">
    <!-- <div>已打开的路由 tags </div> -->
    <div class="navbar__left flex-center">
      <!-- 展开/收缩菜单  -->
      <Hamburger :is-active="isSidebarOpened" @toggle-click="toggleSideBar" />
      <!-- 面包屑 -->
      <bread-crumb />
    </div>
    <!-- 导航栏右侧 -->
    <NavbarRight />
  </div>
</template>

<script setup>
import { $http } from '@/service/request/index'
import { useAppStore } from "@/store"

const appStore = useAppStore();

// 侧边栏是否打开
const isSidebarOpened = computed(() => appStore.sidebar.opened)

// 展开/收缩菜单
function toggleSideBar() {
  appStore.toggleSidebar()
}

// 示例：接口调用
// const logout = async () => {
//   const { code } = await $http('Logout', { id: '001' })
//   if (code === 200) {
//     console.log('todo')
//   }
// }
</script>

<style lang="scss" scoped>
.navbar {
  justify-content: space-between;
  height: $navbar-height;
  background: var(--el-bg-color);
}
</style>
